<template>
    <div class="common-layout">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside style="width: 150px;">
                <div class="aside_left">
                    <el-col :span="12">
                        <el-menu default-active="1" router class="el-menu-vertical-demo" :default-openeds="arr">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <Document />
                                    </el-icon>
                                    <span>用户统计</span>
                                </template>
                                <el-menu-item index="1-1" route="/home/userStatistics/useroverview">用户概述</el-menu-item>
                                <el-menu-item index="1-2" route="/home/userstatistics/schoollist">学生列表</el-menu-item>
                                <el-menu-item index="1-3" route="/home/userstatistics/teacherlist">老师列表</el-menu-item>
                                <el-menu-item index="1-4" route="/home/userstatistics/parentlist">家长列表</el-menu-item>
                            </el-sub-menu>

                        </el-menu>
                    </el-col>
                </div>
            </el-aside>
            <el-container>
                <el-header class="bottom_header">
                    <!-- <div class="ico">
                        <el-icon v-if="!isnull">
                            <Fold />
                        </el-icon>
                        <el-icon v-else="isnull">
                            <Fold />
                        </el-icon>
                    </div> -->
                </el-header>
                <el-main style="background-color: #f7f7f7;"><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template >

<script setup lang="ts">
import { ref } from 'vue';
var isnull = ref(false)
var arr = ref(["1"])
</script>

<style scoped>
.bottom_header {
    background-color: #fff;
    height: 40px;
    z-index: 30;
    margin-left: -2px;
    display: flex;
    align-items: center;
}

.aside_left {
    width: 150px;
    margin-top: 20px;
}

:deep(.el-sub-menu__title),
.el-menu-item {
    font-size: 12px;
    height: 30px;
}

:deep(.el-col-12) {
    max-width: none;
}


::-webkit-scrollbar {
    display: none;

}
</style>